<template>
    <span>
        {{ props.Tooltip.Text }}
    </span>
</template>

<script setup lang="ts">
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import { computed } from "@vue/reactivity";

interface Props {
    Tooltip: ClientMessage.TooltipInformation;
}

const props = defineProps<Props>();

const left = computed(() => `${props.Tooltip.ViewportPointX}%`);
const top = computed(() => `calc(${props.Tooltip.ViewportPointY}% - 1rem - 3rem)`);
</script>

<style scoped>
span {
    position: absolute;
    left: v-bind(left);
    top: v-bind(top);

    transform: translate(-50%, -100%);

    padding: 1rem 2rem;
    border-radius: 0.5rem;
    background-color: rgba(54, 56, 75, 0.75);

    color: white;
    font-size: 1.8rem;
    text-align: center;
    white-space: nowrap;

    z-index: -1;
}

span::after {
    content: '';

    position: absolute;
    left: 50%;
    top: 100%;

    transform: translateX(-50%);

    border-top: solid 1rem rgba(54, 56, 75, 0.75);
    border-left: solid 1rem transparent;
    border-right: solid 1rem transparent;
    border-bottom: solid 1rem transparent;
}
</style>